<template>
  <el-dialog
    title="新增用户"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      ref="addForm"
      v-model="form"
      :upload-exceed="uploadExceed"
      :upload-error="uploadError"
      :upload-change="$uploadChange"
      :option="tableOption"
    >
    </avue-form>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="confirm"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { addObj } from '@/api/app/customer';
import { CUSTOMER_TYPE_LIST } from '@/const/type';
export default {
  name: 'addPopup',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: {
        ...window.$crudMixins.tableOptions,
        emptyBtn: false,
        submitBtn: false,
        addBtn: false,
        labelWidth: 110,
        column: [
          {
            label: '用户昵称',
            prop: 'nickname',
            maxlength: 10,
            rules: [
              {
                required: true,
                message: '请输入用户昵称',
              },
              {
                min: 1,
                max: 20,
                message: '长度在 1 到 10 个字符',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '手机号',
            prop: 'phone',
            width: 160,
            maxlength: 11,
            rules: [
              {
                required: true,
                message: '请输入手机号',
              },
              // {
              //   min: 11,
              //   max: 11,
              //   required: true,
              //   message: '长度在 11 个字符',
              //   trigger: 'blur',
              // },
              {
                pattern: /^1[0-9]{10}$/,
                trigger: 'blur',
                message: '请输入正确的手机号',
              },
            ],
          },
          {
            label: '类型',
            prop: 'type',
            type: 'select',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur',
              },
            ],
            dicData: CUSTOMER_TYPE_LIST,
          },
          {
            label: '用户头像',
            prop: 'avatar',
            type: 'upload',
            listType: 'picture-img',
            span: 12,
            fileSize: 10 * 1024,
            propsHttp: {
              name: 'hash',
              url: 'key',
            },
            fileType: 'img', //img/video/audio
            // action: 'http://upload-z2.qiniup.com',
            oss: 'qiniu',
            cropperOption: {
              enlarge: 2,
              fixed: true,
              fixedNumber: [0.83, 1],
            },
            tip: '请上传jpg/png/jpeg/webp/heic类型的文件，最大可上传10M',
            accept: '.jpg,.png,.jpeg,.webp,.heic',
            limit: 1,
            rules: [
              {
                required: true,
                message: '请上传用户头像',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = { ...this.dataObj };
      } else {
        this.$refs.addForm && this.$refs.addForm.resetForm();
      }
    },
  },
  methods: {
    confirm() {
      this.$refs.addForm.validate(async (valid, done) => {
        if (valid) {
          this.loading = true;
          try {
            const params = { ...this.form };
            await addObj(params);
            this.$message.success('操作成功');
            this.$emit('success', true);
            done();
            this.loading = false;
            this.visible = false;
          } catch (error) {
            done();
            this.loading = false;
            throw new Error(error);
          }
        }
      });
    },
    //文件大小
    uploadError(error, column) {
      if (error === '文件太大不符合') {
        this.$message.warning(`文件大小不能超过${column.fileSize / 1024}M`);
      }
    },
    uploadExceed(limit, files, fileList, column) {
      console.log(limit, files, fileList, column);
      this.$message.error(`只能上传${limit}个文件`);
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
